<template>
	<view class="alipaid">
		<view class="head-navigation">
			<view class="back-box" @click="backHome()">
				<image src="/static/images/home.png" mode=""></image>
			</view>
		</view>
		<view class="order-paid">
			<view class="content">
				<card-com :show-gap="false">
					<view class="product">
						<image class="cover" mode="aspectFit" :src="sku.cover_url"></image>
						<view class="desc">
							<view class="name">{{ product.title }}</view>
							<view class="sku">{{ sku.name }} × {{ amount }}</view>
							<view class="price">￥ {{ order.total_amount }}</view>
						</view>
					</view>
				</card-com>
				<card-com  v-if="order.is_paid">
					<view class="bought">
						<view class="title">
							<image class="icon" src="/static/images/success.png"></image>
							<view class="desc">恭喜购买成功！</view>
						</view>
						<view class="check">
							<button class="button" @click="goToMyOrder">查看订单</button>
						</view>
					</view>
				</card-com>
				<card-com v-else>
					<view class="bought">
						<view class="title">
							<image class="icon" src="/static/images/fail.png"></image>
							<view class="desc">支付失败！</view>
						</view>
						<view class="check">
							<button class="button" @click="goToMyOrder">查看订单</button>
						</view>
					</view>
				</card-com>
			</view>
		</view>
	</view>
</template>

<script>
	import store from 'store'
	import { mapGetters, mapActions} from 'vuex'
	import { getOrder } from "api/orderApi"
	import OrderOperationCom from "components/order/OrderOperationCom"
	import { payOrderByWxmini,payOrderByAdapayWxmini,payOrderByAliwap } from "api/paymentApi"
	export default {
		store,
		components: {
			OrderOperationCom
		},
		data: () => ({
			html: '',
			timer: null,
			id: null,
			order: {},
			items: [],
			sku: {},
			product: {},
			amount: 0
		}),
		computed: {
			...mapGetters([
				'user'
			])
		},
		onLoad() {
			if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener("popstate", this.show, false);
			}
		},
		onShow() {
			let _this = this;
			uni.getStorage({
				key: 'payid',
				success: function(res) {
					_this.id = res.data;
					_this.loadOrder()
				},
				fail() {
					uni.getStorage({
						key: 'isBuyVip',
						success: function(res) {
							uni.reLaunch({
								url:'/pages/mine/mine'
							})
						},
						fail() {
							
						}
					})
				}
			})
		},
		onUnload() {
			window.removeEventListener("popstate", this.show, false);
			// uni.removeStorage({
			// 	key: 'payid'
			// })
			// uni.removeStorage({
			// 	key: 'isBuyVip'
			// })
		},
		methods: {
			show() {
				// uni.removeStorage({
				// 	key: 'payid'
				// })
				// uni.removeStorage({
				// 	key: 'isBuyVip'
				// })
				// uni.reLaunch({
				// 	url: '/pages/mine/mine'
				// })
			},
			loadOrder() {
				getOrder(this.id, {
					include: 'items.sku.product'
				}).then(response => {
					this.order = response
					this.items = response.items
					this.sku = this.items[0].sku
					this.product = this.sku.product
					this.amount = this.items[0].amount
				})
			},
			backHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			goToMyOrder() {
				uni.redirectTo({
					url: `/packs/pages/order/show?id=${this.order.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head-navigation {
		width: 100%;
		height: 120rpx;
		background: rgba(0, 0, 0, 0);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.back-box {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			display: block;
			width: 50rpx;
			height: 50rpx;
		}
	}

	.order-paid {
		padding-top:80rpx;
		.content {
			padding: 20rpx;
			.product {
				display: flex;
				align-items: center;

				.cover {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
				}

				.desc {
					font-size: 24rpx;
				}
			}

			.bought {
				.title {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 280rpx;
					margin: 0 auto;

					.icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					.desc {
						text-align: center;
						margin: 20rpx 0 20rpx 0;
					}
				}

				.check {
					.button {
						width: 560rpx;
						height: 70rpx;
						line-height: 70rpx;
						background: linear-gradient(138deg, #FFDF63 0%, #FEBF05 100%);
						border: none;
						border-radius: 52rpx;
						font-size: 30rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>
